<template>
  <div class="h-full">
    <BasicTable
      ref="tableRef"
      rowKey="id"
      title="账号列表"
      :useSearchForm="true"
      :formConfig="formConfig"
      :bordered="true"
      :api="getUserList"
      :columns="columns"
    >
      <template #toolbar>
        <a-button type="primary" @click="handleAddUser"> 新增账号 </a-button>
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.key == 'action'">
          <a-popconfirm ok-text="确定" cancel-text="取消" @confirm="handleDelUser(record.id)">
            <template #title>
              确定删除<span class="text-red-500 font-bold">{{ record.realName }} </span>？
            </template>
            <a-button type="link" danger>删除</a-button>
          </a-popconfirm>
          <a-button type="link" primary @click="handleEdit(record)">编辑</a-button>
        </template>
      </template>
    </BasicTable>
    <BasicModal @register="registerModal" :title="title" @ok="handleConfirm" @cancel="handleCancel">
      <div class="pt-3px pr-3px">
        <BasicForm @register="registerForm"></BasicForm>
      </div>
    </BasicModal>
    <!-- <iframe
      src="http://221.130.48.170:2880/chat/share?shared_id=39530e86e82811ef80200242ac160006&from=chat&auth=QyZmViMTg4ZTgyOTExZWZiZDM2MDI0Mm"
      style="width: 100%; height: 100%; min-height: 600px"
      frameborder="0"
    >
    </iframe> -->
  </div>
</template>

<script setup lang="ts">
  import { computed, nextTick, ref, unref } from 'vue';
  import { getUserList, addUser, delUser, editUserInfo } from '@/api/account/index';
  import { BasicTable, BasicColumn } from '@/components/Table/index';
  import { BasicModal, useModal } from '@/components/Modal';
  import { BasicForm, FormSchema, useForm } from '@/components/Form';
  import { Popconfirm } from 'ant-design-vue';
  import type { FormProps } from '@/components/Form';
  enum Model {
    Add = 'add',
    Edit = 'edit',
  }
  const APopconfirm = Popconfirm;

  const tableRef = ref<InstanceType<typeof BasicTable>>();
  const columns: BasicColumn[] = [
    {
      title: '姓名',
      key: 'realName',
      dataIndex: 'realName',
    },
    {
      title: '账号',
      key: 'username',
      dataIndex: 'username',
    },
    {
      title: '创建时间',
      key: 'createTime',
      dataIndex: 'createTime',
    },
    {
      title: '更新时间',
      key: 'updateTime',
      dataIndex: 'updateTime',
    },
    {
      title: '操作',
      key: 'action',
      dataIndex: 'action',
    },
  ];

  const formConfig: FormProps = {
    labelWidth: 80,
    labelAlign: 'right',
    schemas: [
      {
        field: 'realName',
        label: '姓名',
        component: 'Input',
        colProps: { span: 6 },
      },
      {
        field: 'username',
        label: '账号',
        component: 'Input',
        colProps: { span: 6 },
      },
    ],
  };

  const formSchema: FormSchema[] = [
    {
      field: 'realName',
      component: 'Input',
      label: '姓名',
      required: true,
      rules: [{ trigger: 'blur', required: true }],
      componentProps: {
        placeholder: '请输入姓名',
      },
    },
    {
      field: 'username',
      component: 'Input',
      required: true,
      label: '账号',
      rules: [{ trigger: 'blur', required: true }],
      componentProps: {
        placeholder: '请输入账号',
      },
    },
    {
      field: 'password',
      component: 'InputPassword',
      required: true,
      label: '密码',
      rules: [{ trigger: 'blur', required: true }],
      componentProps: {
        placeholder: '请输入账号',
      },
    },
    {
      field: 'role',
      component: 'Select',
      // required: true,
      label: '角色',
      // rules: [{ trigger: 'blur', required: true }],
      componentProps: {
        placeholder: '请选择角色',
      },
    },
  ];

  const [registerModal, { openModal }] = useModal();
  const [registerForm, { setFieldsValue, validate, resetFields }] = useForm({
    labelWidth: 60,
    showResetButton: false,
    showSubmitButton: false,
    baseColProps: { span: 24 },
    schemas: formSchema,
  });

  const title = computed(() => {
    return modeRef.value == Model.Add ? '新增账号' : '编辑账号';
  });
  const modeRef = ref(Model.Add);
  const rowId = ref('');

  function handleAddUser() {
    modeRef.value = Model.Add;
    openModal(true);
  }

  // 添加账号
  async function handleAddUserConfirm() {
    const values: any = await validate();
    await addUser(values);
    openModal(false);
    await tableRef.value?.reload();
  }

  // 删除账号
  async function handleDelUser(id: number) {
    await delUser(id);
    await tableRef.value?.reload();
  }

  // 取消弹框
  async function handleCancel() {
    await resetFields();
  }

  // 编辑
  async function handleEdit(data) {
    modeRef.value = Model.Edit;
    rowId.value = data.id;
    openModal();
    await nextTick();
    await resetFields();
    await setFieldsValue({ ...data });
  }

  async function handleEditConfirm() {
    const values: any = await validate();
    console.log('values', values);
    await editUserInfo(+unref(rowId), values);
    openModal(false);
    await tableRef.value?.reload();
  }

  function handleConfirm() {
    switch (unref(modeRef)) {
      case Model.Add:
        handleAddUserConfirm();
        break;
      case Model.Edit:
        handleEditConfirm();
        break;
    }
  }
</script>

<style scoped></style>
